<template>

    <div class="video-view" :style="style">
						<video :src="fullSrc" class="video" />
					 <el-button type="text" class="bth-play" icon="el-icon-video-play" @click="preview" />
						<el-dialog title="视频预览"
																	:close-on-click-modal="false"
																	:close-on-press-escape="false"
																	:visible.sync="dialogVisible"  append-to-body>
							<video class="video-preview" v-if="fullSrc" :src="fullSrc" controls="controls"></video>
						</el-dialog>
				</div>


</template>

<script>
export default {
  props: {
    src: {
      type:String
    },
    width:{
      type: Number,
      default: 100
    },
    height:{
      type: Number,
      default: 100
    },
    lazy: {
      type: Boolean,
      default: true
    }

  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  computed: {
    // 是否显示提示
    style() {
						let width = this.width > 0 ? (this.width + 'px') : 'auto';
      let height = this.height > 0 ? (this.height + 'px') : 'auto';
						return {
        width: width,
        height: height
      }
    },
    fullSrc(){
      return this.buildFullSrc(this.src)
    }
  },
  methods: {
			/**
				* 组建完整路径
				* @param src
				* @returns {string|*}
				*/
				buildFullSrc(src){

					if(!src || src.indexOf("http://") == 0 ||src.indexOf("https://") == 0){
						return src;
					}
					return this.baseUrl + src
				},
				/**
					* 预览
					*/
				preview(){
					this.dialogVisible = true;
				},
  }
};
</script>


<style scoped>
.video-view{
		position: relative;
	 background:#000000;
}
.video-view .video{
	width: 100%;
	height:100%;


}
.bth-play{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 30px;
	color:#FFFFFF;
}
.video-preview{
	width: 100%;
}
</style>


